<style>
.question-div {
  padding: 20px;
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
}
.question-btns {
  text-align: right;
}
.question-btns > Button {
  margin-left: 20px;
}
.btn-div {
  text-align: center;
  padding-top: 20px;
}
</style>
<template>
  <div class="question">
    <div class="content-div">
      <Row style="margin-top:10px">
        <Col
          span="14"
          class="table-form-input-select-col"
        >
        <span
          class="alltitle"
          style="line-height:30px"
        >
          <router-link to="项目列表"> 项目列表</router-link> > <router-link to="questionnaire"> 外部雇主调研板块</router-link>
        </span>
        </Col>
      </Row>
    </div>
    <div class="content-div">
      <Row style="margin-top:10px">
        <Col span="2">
        <router-link :to="{ name: 'questionmgr', params: { qid: qid }}"><Button type="primary">问题管理</Button></router-link>
        </Col>
        <Col span="2">
        <router-link :to="{ name: 'datamgr', params: { qid: qid }}"><Button>数据管理</Button></router-link>
        </Col>
        <Col span="2">
        <router-link :to="{ name: 'stylemgr', params: { qid: qid }}"><Button>样式管理</Button></router-link>
        </Col>
        <Col
          span="2"
          offset="16"
        >
        <Button
          type="info"
          @click="addQuestion"
        >增加问题</Button>
        </Col>
      </Row>
    </div>
    <div class="content-div">
      <div
        class="question-div"
        v-for="(question, index) in data"
      >
				<div style="color: #2d8cf0; font-size: 16px"
        >第{{question.sort}}题</div>
        <label
          class="ivu-form-item-label"
          style="width: 100px;display:inline-block;text-align:right"
        >问题类型</label>
        <Select
          style="width: 250px;margin-left:45px"
          v-model="question.type"
        >
          <Option
            v-for="item in typeList"
            :value="item.type"
            :key="item.value"
          >{{ item.label }}</Option>
        </Select>
        <component
          v-bind:is="componentType(question.type)"
          v-bind.sync="question"
					v-bind:list="data"
        />
        <div class="question-btns">
          <Button
            type="info"
            @click="moveUp(index)"
            :disabled="index == 0"
          >上移</Button>
          <Button
            type="info"
            @click="moveDown(index)"
            :disabled="index == data.length -1"
          >下移</Button>
          <Button
            type="text"
            @click="delQuestion(index)"
          >删除</Button>
        </div>
      </div>
    </div>

    <div class="content-div btn-div">
      <Button
        type="primary"
        @click="saveQuestion"
      >保存问题</Button>
    </div>
  </div>
</template>
<script>
import question from '../../components/question.vue';
import singleselect from '../../components/singleselect.vue';
import multiselect from '../../components/multiselect.vue';
import dropdown from '../../components/dropdown.vue';
export default {
	components: {
        question,
        singleselect,
        multiselect,
        dropdown
    },
    data() {
        return {
        	qid: 0,
        	typeList: [
        		{
        			type: '1',
                    value: 'question',
                    label: '问答题'
                },
                {
                	type: '2',
                    value: 'singleselect',
                    label: '单选题'
                },
                {
                	type: '3',
                    value: 'multiselect',
                    label: '多选题'
                },
                {
                	type: '4',
                    value: 'dropdown',
                    label: '下拉选择题'
                },
        	],
        	data: []
        }
    },
    created(){
          //获取传入的参数
          var params = this.$route.params;
          this.qid = params.qid;

          var self = this
            $.ajax({
                url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=questionnaire_listlist&id=" + this.qid,
                type: "POST",
                dataType: "json",
                success: function(data) {

                    console.log(data);

                    if (data.data != null) {

                        self.data = data.data

                    } else {

                        self.$Message.error('暂无问题');

                    }

                }
            });
    },
    methods: {
    	componentType(id) {
    		var type = 'question'
    		this.typeList.forEach(function(item, index){
    			if (item.type == id) {
    				type = item.value
    			}
    		})
	    	return type
	    },
    	addQuestion(e) {
    		this.data.push({id: 0, type: '1', title: '', memo: '', selection_max: 1, selection: '', sort: this.data.length + 1, goto: '0'})
    	},
    	saveQuestion(e) {
    		if (this.data.length > 0) {
    			for ( var i = 0; i < this.data.length; i++){
				    this.data[i].sort = i + 1
				}
    		}
    		else {
    			return
    		}
    		var data = JSON.stringify(this.data)
    		var self = this
            $.ajax({
                url: " https://evp.51job.com/51job/api/51miniadmin/back.php?action=questionnaire_listbatchedit&id=" + this.qid,
                data: {
                    "list": data
                },
                type: "POST",
                dataType: "json",
                success: function(data) {
                    if (data.code == 1) {
                        console.log(data);
                        self.$Message.success('操作成功!')    

                        $.ajax({
                            url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=questionnaire_listlist&id=" + self.qid,
                            type: "POST",
                            dataType: "json",
                            success: function(dd) {

                                if (dd.data != null) {

                                    self.data = dd.data

                                } else {

                                    self.$Message.error('暂无问题');

                                }
                            }
                        });                    
                    }
                    else {
                        self.$Message.error('操作失败!')   
                    }
                }
            });
    	},
    	delQuestion(index) {
    		let len = this.data.length
    		if (index < len) {
    			let q = this.data.splice(index, 1)

                var self = this
                $.ajax({
                    url: " https://evp.51job.com/51job/api/51miniadmin/back.php?action=questionnaire_listdel&id=" + q[0].id,
                    dataType: "json",
                    success: function(data) {
                        console.log(data);

                        if (data.code == 1) {
                            console.log(data);
                            self.$Message.success('删除成功!')                        
                        }
                    }
                });
    		}
    	},
    	moveUp(index) {
    		if (index > 0) {
    			let q = this.data.splice(index, 1)
    			this.data.splice(index-1, 0, q[0])
    		}
    	},
    	moveDown(index) {
    		if (index < this.data.length - 1) {
    			let q = this.data.splice(index, 1)
    			this.data.splice(index+1, 0, q[0])
    		}
    	}
    }
};
</script>
